<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
        <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'"> -->
        <script src="lib/vue.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="lib/element-ui/index.css" />
        <link rel="stylesheet" href="lib/style.css" />
        <!-- 引入组件库 -->
        <script src="lib/element-ui/index.js"></script>

        <script src="component/head/head.js"></script>
        <link rel="stylesheet" href="component/head/head.css" />
        <link rel="stylesheet" href="lib/style.css" />

        <title>工具集</title>
        <style>
            ol,
            ul {
                list-style: none;
                padding-inline-start: 10px;
            }

            p {
                margin: auto;
                text-align: center;
            }

            .app-item {
                grid-column: span 1;
                grid-row: span 1;
                height: 100%;
                user-select: none;
                -webkit-user-select: none;
                transition-duration: var(0.3s, 0.3s);
                box-sizing: border-box;
                opacity: 1;
                width: 96px;
                height: 96px;
                border-radius: 12px;
                padding: 0 18 18;
            }

            .app-item-icon {
                width: 60px;
                height: 60px;
                overflow: hidden;
                border-radius: 12px;
                font-size: 12px;
                box-shadow: 0 0 5px #0000001a;
                transition: 0.2s;
                cursor: pointer;
                position: relative;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
            }

            .d-text-icon {
                font-size: 22px;
                color: #fff;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                text-align: center;
                white-space: nowrap;
                position: relative;
            }

            .app-title {
                font-size: 20px;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
            }
            #main {
                position: fixed;
                top: 30px;
            }
        </style>
    </head>

    <body class="backgrond">
        <div id="index">
            <div>
                <my-menu></my-menu>
            </div>
            <ul id="main" style="display: flex">
                <li
                    @click="window.location.href='./view/upcoming/upcoming.html'"
                    class="app-item"
                >
                    <div class="app-item-icon">
                        <div class="d-text-icon">
                            <span class="app-title">便签</span>
                        </div>
                    </div>
                    <p>便签</p>
                </li>
                <li
                    onclick="window.location.href='./view/excel-search/excel-search.html'"
                    class="app-item"
                >
                    <div class="app-item-icon">
                        <div class="d-text-icon">
                            <span class="app-title">Excel</span>
                        </div>
                    </div>
                    <p>表格搜索</p>
                </li>
                <li
                    id="fanyi"
                    @click="open('https://fanyi.youdao.com')"
                    class="app-item"
                >
                    <div class="app-item-icon">
                        <div class="d-text-icon">
                            <span class="app-title">翻译</span>
                        </div>
                    </div>
                    <p>翻译</p>
                </li>
                <li
                    onclick="window.location.href='./view/clipboard-edit/edit.html'"
                    class="app-item"
                >
                    <div class="app-item-icon">
                        <div class="d-text-icon">
                            <span class="app-title">剪切板</span>
                        </div>
                    </div>
                    <p>剪切板</p>
                </li>
            </ul>
            <script src="home.js"></script>
        </div>
    </body>
</html>
